<template>
  <div class="sdf-root">
    <base-filed-detail :submit-data-action="submitDataAction" :mid="mid" :title="title" :query-list-action="queryListAction" :rules="rules"
                       :view-field="viewField" :formFiled="formFiled" :submitBeforeAction="submitBeforeAction">

      <template v-slot:form-item>
        <el-form-item label="肥料名称" prop="manureName">
          <el-input v-model="formFiled.manureName"></el-input>
        </el-form-item>
        <el-form-item label="底肥用量(kg)" prop="manureUseLevel">
          <el-input v-model="formFiled.manureUseLevel"></el-input>
        </el-form-item>
        <el-form-item label="施肥前" prop="sfq">
          <upload-image :limit="1" v-model="formFiled.sfq"></upload-image>
        </el-form-item>
        <el-form-item label="施肥中" prop="sfz">
          <upload-image :limit="1" v-model="formFiled.sfz"></upload-image>
        </el-form-item>
        <el-form-item label="施肥后" prop="sfh">
          <upload-image :limit="1" v-model="formFiled.sfh"></upload-image>
        </el-form-item>
      </template>
    </base-filed-detail>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import baseFiledDetail from '../components/baseFiledDetail'
  import { manureList, manureEdit } from '@/api/industry/cpf'
  import uploadImage from '@/components/UploadImage'

  export default {
    name: 'sdf',
    props: {
      mid: {
        type: [String, Number],
        default: null
      }
    },
    components: {
      uploadImage,
      baseFiledDetail
    },
    setup(props, content) {
      let data = reactive({
        formFiled: {
          manureName: null,
          manureUseLevel: null,
          sfq: [],
          sfz: [],
          sfh: []
        },
        queryListAction: manureList,
        submitDataAction: manureEdit,
        title: '施底肥情况',
        rules: {},
        viewField: [
          { label: '肥料名称', field: 'manureName' },
          { label: '底肥用量(kg)', field: 'manureUseLevel' },
          { label: '施肥前', field: 'photos', type: 'img', photoIndex: 0 },
          { label: '施肥中', field: 'photos', type: 'img', photoIndex: 1 },
          { label: '施肥后', field: 'photos', type: 'img', photoIndex: 2 }
        ]

      })
      const submitBeforeAction = (requestData) => {
        let req = JSON.parse(JSON.stringify(requestData))
        req.photos = [{ type: 1, ...req.sfq[0] }, { type: 2, ...req.sfz[0] }, { type: 3, ...req.sfh[0] }]
        return req
      }
      return { ...toRefs(data), submitBeforeAction }
    }
  }
</script>

<style scoped lang="scss">
  .sdf-root {

  }
</style>
